<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #container ul{
            border: 3px solid red;
        }
    </style>
</head>
<body>



<ul>
    <li class="blue">John</li>
    <li class="red">Adam</li>
    <li class="blue">Sam</li>
    <li class="red">Brian</li>
    <li class="red">Kyle</li>
    <li class="red">Ryan</li>
    <li class="blue">David</li>
</ul>
//DAVID WITH NICK
<script type="text/javascript">
   // document.getElementsByTagName('li').innerHTML = "NICK";
   //John Resig , Jquery is a library ontop of javascript
   // 2008
   //handle cross browser issues
   //simpler api for traversing  access dom, chaining, utility functions
    var liElements  = document.getElementsByTagName('li'),k;
    for(k = 0; k < liElements.length; k++){
        if(liElements[k].innerHTML === "David"){
            liElements[k].innerHTML = "NICK";
        }else{
      //     liElements[k].parentNode.removeChild(liElements[k]);

        }
    }
    var blueElements = document.getElementsByClassName('blue'), i, j;

    for(i = 0; i < blueElements.length; i++){
        blueElements[i].style.backgroundColor = 'blue';
    }

    var redElements = document.getElementsByClassName('red');

    for( j = 0; j < redElements.length; j++){
        redElements[j].style.backgroundColor = 'red';
    }
    //
</script>

</body>
</html>